/*
 * @Author      : chenzhinjian
 * @Date        : 2019-01-07 11: 11: 43
 * @LastEditTime: 2019-03-22 08:51:50
 * @Description : 
 */ 
 $grid-prefix: $css-prefix;
.example {
  > .#{$grid-prefix}btn,
  > .#{$grid-prefix}btns {
    margin-top: px-or-rem(5);
    margin-bottom:px-or-rem(5);
  }
}

.#{$grid-prefix}btn.pill {
  border-radius: 100%;
}
.#{$grid-prefix}btn {
  display       : inline-block;
  padding       : px-or-rem(4) px-or-rem(12);
  text-align    : center;
  vertical-align: middle;
  line-height   : $btn-line-height;
  font-size     : $btn-font-size;
  border        : $btn-border-width solid transparent;
  border-radius : $btn-border-radius;
  cursor        : pointer;
  outline       : none;
  user-select:none;
  transition: color .2s linear,background-color .2s linear,border .2s linear;
  &-default {
    color           : $text-color;
    background-color: $color-default;
    border-color: #ccc;
    &:hover {
      background-color: darken($color-default, 5%);
    }

    &:focus {
      background-color: darken($color-default, 5%);
    }

    &:active {
      background-color: darken($color-default, 20%);
    }
  }

  &-primary {
    color           : #fff;
    background-color: $primary-color;

    &:hover {
      background-color: darken($primary-color, 5%);
    }

    &:focus {
      background-color: darken($primary-color, 5%);
    }

    &:active {
      background-color: darken($primary-color, 20%);
    }
   
  }

  &-info {
    color           : #fff;
    background-color: $info-color;

    &:hover {
      background-color: darken($info-color, 5%);
    }

    &:focus {
      background-color: darken($info-color, 5%);
    }

    &:active {
      background-color: darken($info-color, 20%);
    }
  }

  &-success {
    color           : #fff;
    background-color: $success-color;

    &:hover {
      background-color: darken($success-color, 5%);
    }

    &:focus {
      background-color: darken($success-color, 5%);
    }

    &:active {
      background-color: darken($success-color, 20%);
    }
  }

  &-danger {
    color           : #fff;
    background-color: $danger-color;

    &:hover {
      background-color: darken($danger-color, 5%);
    }

    &:focus {
      background-color: darken($danger-color, 5%);
    }

    &:active {
      background-color: darken($danger-color, 20%);
    }
  }

  &-warning {
    color           : #fff;
    background-color: $warning-color;

    &:hover {
      background-color: darken($warning-color, 5%);
    }

    &:focus {
      background-color: darken($warning-color, 5%);
    }

    &:active {
      background-color: darken($warning-color, 20%);
    }
  }

  // &.inverted {
  //   color           : #fff;
  //   background-color: $color-inverted;

  //   &:hover {
  //     background-color: lighten($color-inverted, 10%);
  //   }

  //   &:focus {
  //     background-color: lighten($color-inverted, 10%);
  //   }

  //   &:active {
  //     background-color: lighten($color-inverted, 10%);
  //   }
  // }

  &-link {
    color           : $primary-color;
    background-color: transparent;
    border-color    : transparent;

    &:hover {
      color           : darken($primary-color, 10%);
      text-decoration : underline;
      background-color: transparent;
    }

    &:focus {
      color           : darken($primary-color, 10%);
      text-decoration : underline;
      background-color: transparent;
    }

    &:active {
      color           : darken($primary-color, 20%);
      text-decoration : underline;
      background-color: transparent;
    }
  }
}

// outline button
.#{$grid-prefix}btn.outline {
  background-color: transparent;

  &.#{$grid-prefix}btn-default {
    color       : $text-color;
    border-color: $text-color;
    &:hover {
      color           : #fff;
      background-color: $text-color;
    }

    &:focus {
      color           : #fff;
      background-color: $text-color;
    }

    &:active {
      color           : #fff;
      background-color: $text-color;
    }
  }

  &.#{$grid-prefix}btn-primary {
    color       : $primary-color;
    border-color: $primary-color;

    &:hover {
      color           : #fff;
      background-color: $primary-color;
    }

    &:focus {
      color           : #fff;
      background-color: $primary-color;
    }

    &:active {
      color           : #fff;
      background-color: $primary-color;
    }
  }

  &.#{$grid-prefix}btn-info {
    color       : $info-color;
    border-color: $info-color;

    &:hover {
      color           : #fff;
      background-color: $info-color;
    }

    &:focus {
      color           : #fff;
      background-color: $info-color;
    }

    &:active {
      color           : #fff;
      background-color: $info-color;
    }
  }

  &.#{$grid-prefix}btn-success {
    color       : $success-color;
    border-color: $success-color;

    &:hover {
      color           : #fff;
      background-color: $success-color;
    }

    &:focus {
      color           : #fff;
      background-color: $success-color;
    }

    &:active {
      color           : #fff;
      background-color: $success-color;
    }
  }

  &.#{$grid-prefix}btn-danger {
    color       : $danger-color;
    border-color: $danger-color;

    &:hover {
      color           : #fff;
      background-color: $danger-color;
    }

    &:focus {
      color           : #fff;
      background-color: $danger-color;
    }

    &:active {
      color           : #fff;
      background-color: $danger-color;
    }
  }

  &.#{$grid-prefix}btn-warning {
    color       : $warning-color;
    border-color: $warning-color;

    &:hover {
      color           : #fff;
      background-color: $warning-color;
    }

    &:focus {
      color           : #fff;
      background-color: $warning-color;
    }

    &:active {
      color           : #fff;
      background-color: $warning-color;
    }
  }

  // &.#{$grid-prefix}btn-inverted {
  //   color       : $color-inverted;
  //   border-color: $color-inverted;

  //   &:hover {
  //     color           : #fff;
  //     background-color: $color-inverted;
  //   }

  //   &:focus {
  //     color           : #fff;
  //     background-color: $color-inverted;
  //   }

  //   &:active {
  //     color           : #fff;
  //     background-color: $color-inverted;
  //   }
  // }
}
// button group
.#{$grid-prefix}btns {
  position      : relative;
  display       : inline-block;
  vertical-align: bottom;

  > .#{$grid-prefix}btn {
    position     : relative;
    float        : left;
    border-radius: 0;
    margin-left  : -$btn-border-width;

    &:first-child {
      margin-left              : 0;
      border-top-left-radius   : $btn-border-radius;
      border-bottom-left-radius: $btn-border-radius;
    }

    &:last-child {
      border-top-right-radius   : $btn-border-radius;
      border-bottom-right-radius: $btn-border-radius;
    }
  }

  &.vertical {
    > .#{$grid-prefix}btn {
      position     : relative;
      display      : block;
      float        : none;
      border-radius: 0;
      width        : 100%;
      max-width    : 100%;
      margin-left  : 0;
      margin-top   : -$btn-border-width;

      &:first-child {
        margin-top             : 0;
        border-top-left-radius : $btn-border-radius;
        border-top-right-radius: $btn-border-radius;
      }

      &:last-child {
        border-bottom-left-radius : $btn-border-radius;
        border-bottom-right-radius: $btn-border-radius;
      }
    }
  }
}
.#{$grid-prefix}btn-lg,
.#{$grid-prefix}btn-group-lg > .#{$grid-prefix}btn {
  padding:px-or-rem(10) px-or-rem(16);
  font-size: px-or-rem(18);
  line-height: 1.3333333;
  border-radius: px-or-rem(6);
}
.#{$grid-prefix}btn-sm,
.#{$grid-prefix}btn-group-sm > .#{$grid-prefix}btn {
  padding:px-or-rem(5) px-or-rem(10);
  font-size: px-or-rem(12);
  line-height: 1.5;
  border-radius: px-or-rem(3);
}
.#{$grid-prefix}btn-xs,
.#{$grid-prefix}btn-group-xs > .#{$grid-prefix}btn {
  padding: px-or-rem(1) px-or-rem(5);
  font-size: px-or-rem(12);
  line-height: 1.5;
  border-radius: px-or-rem(3);
}

.#{$grid-prefix}btn-block {
  display: block;
  width: 100%;
}
.#{$grid-prefix}btn-shape {
  padding: 0px;
  width: px-or-rem(36);
  height: px-or-rem(36);
}
.#{$grid-prefix}btn-disabled,
button[disabled],
fieldset[disabled]{
  background-color: darken($primary-color, 10%);
  cursor: not-allowed;
  @include box-shadow(none);
  opacity: .65;
  &:hover,
  &:focus,
  &.focus {
    background-color: darken($primary-color, 10%);
    cursor: not-allowed;
    @include box-shadow(none);
    opacity: .65;
    // background-color: darken($primary-color, 20%);
        // border-color: $border-color;
  }
}